<template>
  <div>
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="用户手机">
        <el-input v-model="searchForm.phone" clearable></el-input>
      </el-form-item>
      <el-form-item label="景点">
        <el-select v-model="searchForm.attrId" clearable placeholder="请选择景点">
          <el-option
            v-for="item in attrOptions"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="预约日期">
        <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.appDate"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">预约搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="searchRes" border style="width: 100%" height="400">
      <el-table-column prop="id" label="预约id" width="70"></el-table-column>
      <el-table-column prop="title" label="景点名"></el-table-column>
      <el-table-column prop="phone" label="用户手机" width="120"></el-table-column>
      <el-table-column prop="time" label="预约日期" :formatter="formatAppDate"></el-table-column>
      <el-table-column prop="amount" label="预约数量"></el-table-column>
      <el-table-column prop="price" label="预约总价"></el-table-column>
      <el-table-column prop="status" label="预约状态" :formatter="formatStatus" width="82"></el-table-column>
      <el-table-column prop="msg" label="预约取消原因"></el-table-column>
      <el-table-column prop="create_time" label="预约生成时间" :formatter="formatCT"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            size="small"
            :disabled="scope.row.status != 1?true:false"
            :loading="isLoading"
            @click="verify(scope.row)"
          >审核</el-button>
          <el-button
            size="small"
            :disabled="scope.row.status == 0?true:false"
            :loading="isLoading"
            type="danger"
            @click="handleDelete(scope.row)"
          >取消</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "AttrAppList",
  // props: ["attrList"],
  data() {
    return {
      searchForm: {
        phone: "",
        attrId: undefined,
        appDate: null
      },
      isLoading: false,
      searchRes: [],
      attrOptions: []
    };
  },
  computed: {},
  mounted: async function() {
    let data = await this._axios
      .get(`/ycwAdmin/attraction/getList`)
      .then(data => data.data.data);
    // console.log(data);
    if (!Array.isArray(data)) {
      this.attrOptions = data.attrList;
    } else {
      this.attrOptions = data;
    }
  },
  methods: {
    formatStatus: function(r, c, cellValue) {
      console.log(r, c);
      let s = "";
      switch (cellValue) {
        case 0:
          s = "已取消";
          break;
        case 1:
          s = "未审核";
          break;
        case 2:
          s = "已审核";
          break;
      }
      return s;
    },
    formatAppDate: function(r, c, cellValue) {
      console.log(r, c);
      return new Date(Number(cellValue)).toLocaleDateString();
    },
    formatCT: function(r, c, cellValue) {
      console.log(r, c);
      return new Date(Number(cellValue)).toLocaleString();
    },
    onSubmit: async function() {
      let tos = {};
      for (const k in this.searchForm) {
        if (this.searchForm[k]) {
          if (k == "appDate") {
            tos[k] = new Date(this.searchForm[k]).getTime();
          } else {
            tos[k] = this.searchForm[k];
          }
        }
      }
      if (Object.keys(tos).length) {
        let data = await this._axios.get(
          `/ycwAdmin/attraction/getAppointment`,
          { params: tos }
        );
        // console.log(data);
        if (data.data.code == 1) {
          this.searchRes = data.data.data.attrAppList;
        } else {
          this.searchRes = data.data.data;
          this.$message({
            type: "info",
            message: data.data.msg
          });
        }
      } else {
        this.$message({
          type: "info",
          message: "请至少填一个搜索项"
        });
      }
    },
    verify: async function(row) {
      this.isLoading = true;
      let data = await this._axios.post(
        "/ycwAdmin/attraction/verifyAppointment",
        {
          appId: row.id
        }
      );
      if (data.data.code == 1) {
        this.$message({
          type: "success",
          message: "审核成功"
        });
      } else {
        this.$message({
          type: "error",
          message: "审核失败"
        });
      }
      this.onSubmit();
      this.isLoading = false;
    },
    handleDelete(obj) {
      let isDel = false;
      this.$prompt(`请输入预约取消原因`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern:/^[\u4E00-\u9FA5A-Za-z0-9_]+$/,
        inputErrorMessage:'不要留空',
        type: "warning",
        beforeClose: async (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            let data = await this._axios.post("/ycwAdmin/attraction/cancelAppointment", {
              appId: obj.id,
              msg:instance.inputValue
            });
            instance.confirmButtonLoading = false;
            if (data.data.code) {
              isDel = true;
              done();
            } else {
              done();
            }
          } else {
            done();
          }
        }
      })
        .then(() => {
          if (isDel) {
            this.$message({
              type: "success",
              message: "取消预约成功!"
            });
          } else {
            this.$message({
              type: "error",
              message: "取消预约失败!"
            });
          }
          this.onSubmit();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          });
        });
    }
  }
};
</script>

<style lang="scss" scopted>
.list {
  height: 60vh;
  overflow-y: scroll;
  &::before {
    display: none;
  }
}
</style>